---
import MobileTableOfContents from './MobileTableOfContents.astro';
import TableOfContents from './TableOfContents.astro';

import { Ad } from '~/components/RightSidebar/ad';

const Banner = Ad;
---

{
	Astro.locals.starlightRoute.toc && (
		<>
			<div class="lg:sl-hidden">
				<MobileTableOfContents />
			</div>
			<div class="right-sidebar-panel sl-hidden lg:sl-block">
				<div class="sl-container">
					<TableOfContents />
				</div>
				<div class="sl-container">
					<Banner />
				</div>
			</div>
		</>
	)
}

<style>
	@layer starlight.core {
		.right-sidebar-panel {
			flex-direction: column;
			justify-content: space-between;
			min-height: 100%;
			padding: 1rem var(--sl-sidebar-pad-x);
		}
		.sl-container {
			width: calc(var(--sl-sidebar-width) - 2 * var(--sl-sidebar-pad-x));
		}
		.right-sidebar-panel :global(h2) {
			color: var(--sl-color-white);
			font-size: var(--sl-text-h5);
			font-weight: 600;
			line-height: var(--sl-line-height-headings);
			margin-bottom: 0.5rem;
		}
		.right-sidebar-panel :global(:where(a)) {
			display: block;
			font-size: var(--sl-text-xs);
			text-decoration: none;
			color: var(--sl-color-gray-3);
			overflow-wrap: anywhere;
		}
		.right-sidebar-panel :global(:where(a):hover) {
			color: var(--sl-color-white);
		}
		@media (min-width: 72rem) {
			.sl-container {
				max-width: calc(
					(
						(
								100vw - var(--sl-sidebar-width) - 2 * var(--sl-content-pad-x) - 2 *
									var(--sl-sidebar-pad-x)
							) *
							0.25 /* MAGIC NUMBER 🥲 */
					)
				);
			}
		}
	}

	@media (min-width: 72rem) {
		.right-sidebar-panel {
			display: flex;
		}
	}
</style>
